 <template>
  <div class="navbar">
    <div class="tab-item" :class="{ active: currentRouter == 'Home' }" @click.stop="go('/')">
      <i class="icon icon-zhuye"></i>
      <span>主页</span>
    </div>
    <div class="tab-item" :class="{ active: currentRouter == 'Charts' }" @click.stop="go('/charts')">
      <i class="icon icon-paixingbang"></i>
      <span>排行榜</span>
    </div>
    <div class="tab-item" :class="{ active: currentRouter == 'Rules' }" @click.stop="go('/rules')">
      <i class="icon icon-huodong"></i>
      <span>活动规则</span>
    </div>
    <div class="tab-item" :class="{ active: currentRouter == 'Mine' }" @click.stop="go('/mine')">
      <i class="icon icon-wode"></i>
      <span>我的</span>
    </div>
  </div>
 </template>

<script>
export default {
  name: 'Navbar',
  props: ['currentTab'],
  data () {
    return {
      currentRouter: this.$route.name
    }
  },
  methods: {
    go (path) {
      let self = this
      // if(path === '/') {
      //   this.$router.push(path)
      //   this.$router.go(0)
      //   return
      // }
      if(path === '/mine') {
        if(!this.$inApp) {
          this.$messagebox.confirm('下载香肠树App,查看我的更多详情').then(action => {        
            // 不在本地应用内，跳转下载应用链接
            window.open(self.$url, '_self')
          })
          return
        }
      }
      this.$router.push(path)
      this.currentRouter = this.$route.name
    }
  }
}
</script>

<style scoped>
.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  height: 120px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  background: #333742;
  color: #fff;
}
.navbar .tab-item {
  width: 25%;
  font-size: 24px;
}
.navbar .tab-item.active {
  color: #ffc63e;
}
.navbar .tab-item span,
.navbar .tab-item i {
  display: block;
}
.navbar .tab-item .icon {
  font-size: 50px;
  margin-bottom: 10px;
}
</style>
